<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebGL 完整诊断</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background: #000;
      color: white;
      font-family: Arial, sans-serif;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    canvas {
      display: block;
      border: 2px solid #fff;
      margin: 20px 0;
      background: #111;
    }
    .status {
      padding: 15px;
      margin: 10px 0;
      border-radius: 5px;
    }
    .success { background: #0a3; }
    .warning { background: #fa0; color: #000; }
    .error { background: #c00; }
    .info { background: #036; }
    button {
      padding: 10px 20px;
      margin: 5px;
      background: #444;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
    button:hover { background: #666; }
    .test-area {
      border: 1px solid #444;
      padding: 15px;
      margin: 15px 0;
      border-radius: 5px;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>WebGL 完整诊断工具</h1>

  <div id="status" class="status info">正在初始化诊断...</div>

  <div class="test-area">
    <h3>测试1: 基础WebGL支持</h3>
    <button onclick="testBasicWebGL()">运行基础测试</button>
    <div id="basicResult"></div>
  </div>

  <div class="test-area">
    <h3>测试2: 2D Canvas回退</h3>
    <button onclick="test2DCanvas()">运行2D测试</button>
    <canvas id="canvas2d" width="400" height="200"></canvas>
    <div id="canvas2dResult"></div>
  </div>

  <div class="test-area">
    <h3>测试3: WebGL强制软件渲染</h3>
    <button onclick="testSoftwareWebGL()">使用软件渲染</button>
    <canvas id="glCanvas" width="400" height="300"></canvas>
    <div id="webglResult"></div>
  </div>

  <div class="test-area">
    <h3>系统信息</h3>
    <div id="systemInfo"></div>
  </div>
</div>

<script>
  // 系统信息收集
  function collectSystemInfo() {
    const info = document.getElementById('systemInfo');
    let html = '';

    // 用户代理
    html += '<div>浏览器: ' + navigator.userAgent + '</div>';

    // 屏幕信息
    html += '<div>屏幕分辨率: ' + screen.width + 'x' + screen.height + '</div>';
    html += '<div>颜色深度: ' + screen.colorDepth + '位</div>';

    // 硬件并发
    html += '<div>CPU核心数: ' + (navigator.hardwareConcurrency || '未知') + '</div>';

    // 内存
    html += '<div>设备内存: ' + (navigator.deviceMemory || '未知') + 'GB</div>';

    // WebGL支持
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (gl) {
      html += '<div class="success">WebGL支持: 是</div>';
      html += '<div>WebGL版本: ' + gl.getParameter(gl.VERSION) + '</div>';
      html += '<div>渲染器: ' + gl.getParameter(gl.RENDERER) + '</div>';
      html += '<div>供应商: ' + gl.getParameter(gl.VENDOR) + '</div>';
    } else {
      html += '<div class="error">WebGL支持: 否</div>';
    }

    info.innerHTML = html;
  }

  // 测试基础WebGL支持
  function testBasicWebGL() {
    const result = document.getElementById('basicResult');
    const canvas = document.createElement('canvas');

    // 尝试不同的上下文类型
    const contexts = [
      { name: 'webgl', context: canvas.getContext('webgl') },
      { name: 'experimental-webgl', context: canvas.getContext('experimental-webgl') },
      { name: 'webgl2', context: canvas.getContext('webgl2') }
    ];

    let html = '';
    contexts.forEach(ctx => {
      if (ctx.context) {
        html += `<div class="success">✓ ${ctx.name}: 支持</div>`;
        try {
          const debugInfo = ctx.context.getExtension('WEBGL_debug_renderer_info');
          if (debugInfo) {
            const vendor = ctx.context.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
            const renderer = ctx.context.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
            html += `<div>  - 供应商: ${vendor}</div>`;
            html += `<div>  - 渲染器: ${renderer}</div>`;
          }
        } catch (e) {
          html += `<div>  - 调试信息不可用</div>`;
        }
      } else {
        html += `<div class="warning">✗ ${ctx.name}: 不支持</div>`;
      }
    });

    result.innerHTML = html;
  }

  // 测试2D Canvas作为回退
  function test2DCanvas() {
    const canvas = document.getElementById('canvas2d');
    const ctx = canvas.getContext('2d');
    const result = document.getElementById('canvas2dResult');

    if (!ctx) {
      result.innerHTML = '<div class="error">2D Canvas也不支持！</div>';
      return;
    }

    // 绘制一些内容
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(50, 50, 100, 100);

    ctx.fillStyle = '#00ff00';
    ctx.beginPath();
    ctx.arc(200, 100, 40, 0, Math.PI * 2);
    ctx.fill();

    ctx.fillStyle = '#0000ff';
    ctx.font = '20px Arial';
    ctx.fillText('2D Canvas正常', 120, 180);

    result.innerHTML = '<div class="success">✓ 2D Canvas工作正常</div>';
  }

  // 测试WebGL（强制软件渲染）
  function testSoftwareWebGL() {
    const canvas = document.getElementById('glCanvas');
    const result = document.getElementById('webglResult');

    // 尝试创建WebGL上下文，使用宽松的设置
    const contextAttributes = {
      alpha: false,
      depth: false,
      stencil: false,
      antialias: false,
      failIfMajorPerformanceCaveat: false  // 即使性能差也继续
    };

    let gl = null;
    try {
      gl = canvas.getContext('webgl', contextAttributes) ||
              canvas.getContext('experimental-webgl', contextAttributes);
    } catch (e) {
      result.innerHTML = `<div class="error">WebGL上下文创建异常: ${e}</div>`;
      return;
    }

    if (!gl) {
      result.innerHTML = '<div class="error">无法创建WebGL上下文</div>';

      // 建议解决方案
      result.innerHTML += `
                    <div class="warning">
                        <h4>建议解决方案:</h4>
                        <ol>
                            <li>在 chrome://flags/ 中启用所有WebGL相关选项</li>
                            <li>更新显卡驱动程序</li>
                            <li>在Chrome设置中启用硬件加速</li>
                            <li>尝试使用Firefox浏览器</li>
                        </ol>
                    </div>
                `;
      return;
    }

    // 极简着色器
    const vsSource = `
                attribute vec4 aPosition;
                void main() {
                    gl_Position = aPosition;
                }
            `;

    const fsSource = `
                precision mediump float;
                void main() {
                    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
                }
            `;

    function createShader(gl, type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      return shader;
    }

    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);

    // 三角形数据
    const positions = new Float32Array([
      0.0, 0.5,
      -0.5, -0.5,
      0.5, -0.5
    ]);

    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

    const positionLocation = gl.getAttribLocation(program, "aPosition");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    // 设置视口
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 绘制
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    // 检查错误
    const error = gl.getError();
    if (error === gl.NO_ERROR) {
      result.innerHTML = '<div class="success">✓ WebGL工作正常！红色三角形应该可见</div>';
      document.getElementById('status').innerHTML = '<div class="success">诊断完成 - WebGL现在应该正常工作</div>';
    } else {
      result.innerHTML = `<div class="error">WebGL绘制错误: ${error}</div>`;
    }
  }

  // 页面加载时自动运行
  window.addEventListener('load', function() {
    collectSystemInfo();
    testBasicWebGL();
    test2DCanvas();
    document.getElementById('status').innerHTML = '<div class="info">诊断工具已就绪。请点击各个测试按钮。</div>';
  });
</script>
</body>
</html>